<template>
    <div>
        <el-container>
            <el-main class="login-main">
                <el-row>
                    <el-col :offset="8" :span="8">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="账号">
                                <el-input v-model="form.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input type="password" @keyup.enter.native="onSubmit" v-model="form.password" @keyup="onSubmit"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex';

    export default {
        name: "Login",
        data() {
            return {
                form: {
                    username: "",
                    password: "",
                },
            }
        },
        beforeCreate() {
            document.querySelector('html').setAttribute('style', 'background:#fff')
        },
        beforeDestroy() {
            // document.querySelector('html').removeAttribute('style')
        },
        mounted() {
            // localStorage.setItem('user',JSON.stringify(this.$cookies.get("user")))
        },

        methods: {
            ...mapMutations(['changeCMSLogin']),

            onSubmit() {

                if (this.form.username === '' || this.form.password === '') {
                    alert('账号或密码不能为空');
                    return false;
                }else{
                    this.requestAxios.requestCMS('post','/manager/login.do',{
                        username: this.form.username,
                        pwd: this.$md5(this.form.password),
                    },(response)=>{
                        // 将用户token保存到vuex中
                        this.changeCMSLogin({ sid: response.data.sid, user: response.data.user });
                        this.$router.push('/cms/home-page');
                    });
                }
            },
        }
    }
</script>

<style scoped>
    .login-main{
        margin-top: 200px;
    }
</style>
